<template>
  <div
    class="w-[200px] h-[200px] bg-blue-400 rounded-sm shadow-md p-2 flex justify-around text-white"
  >
    <!-- 天气图标 -->
    <div class="weatherIcon text-zinc-200 text-xl">
      <My-svg-icon class="w-5 h-5" name="weather"> </My-svg-icon>
      <span>xxx</span>
    </div>
    <div class="details flex flex-col">
      <!-- 温度 -->
      <div class="text-xl font-semibold">{{ temperature }}°C</div>
      <!-- 天气描述 -->
      <p class="text-[10px]">{{ iconList.icon }}</p>
      <p class="text-[10px]">{{ iconList.cloud }}</p>
    </div>
    <button id="btn">点我</button>
    <div id="map"></div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, computed } from 'vue'
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords
      console.log(`Latitude: ${latitude}, Longitude: ${longitude}`)
    },
    (error) => {
      console.error('获取位置失败:', error)
    }
  )
} else {
  console.error('Geolocation is not supported by this browser.')
}

// import AMapLoader from '@amap/amap-jsapi-loader'
// let userLocationInfo = ref('')
// window._AMapSecurityConfig = {
//   securityJsCode: 'ab2423e2500dcbf21ba41537e1d625e5'
// }
// axios
//   .get('https://restapi.amap.com/v3/?key=bb6bd652af8d247d1cd0e9a07359c08d')
//   .then((res) => {
//     console.log(res)
//   })
// AMapLoader.load({
//   key: 'ca7a1a349529a9eb46e93d65ed5814e5', //申请好的 Web 端开发者 Key，首次调用 load 时必填
//   version: '2.0' //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
// })
//   .then((AMap) => {
//     AMap.plugin('AMap.Geolocation', function () {
//       const geolocation = new AMap.Geolocation({
//         enableHighAccuracy: true, // 是否使用高精度定位，默认：true
//         timeout: 10000, // 设置定位超时时间，默认：无穷大,
//         needAddress: true, // 是否返回地址信息
//         extensions: 'all',
//         noIpLocate: 2,
//         GeoLocationFirst: true
//       })
//       geolocation.getCurrentPosition(function (status, result) {
//         console.log('11')

//         if (status == 'complete') {
//           onComplete(result)
//         } else {
//           console.log('error')
//           onError(result)
//         }
//       })

//       function onComplete(data) {
//         AMap.plugin('AMap.CitySearch', function () {
//           var citySearch = new AMap.CitySearch()
//           citySearch.getLocalCity(function (status, result) {
//             if (status === 'complete' && result.info === 'OK') {
//               // 查询成功，result即为当前所在城市信息
//               console.log(result, 'dddd')
//             }
//           })
//         })
//         const AddressComponent = data.addressComponent
//         const ForMattedAddress = data.formattedAddress
//         Object.keys(AddressComponent).forEach((res) => {
//           if (
//             AddressComponent[res] == '' ||
//             AddressComponent[res].length == 0
//           ) {
//             delete AddressComponent[res]
//           }
//         })
//         userLocationInfo.value = {
//           AddressComponent,
//           ForMattedAddress
//         }
//         console.log(userLocationInfo.value.AddressComponent)
//       }

//       function onError(data) {
//         // 定位出错
//       }
//     })
//   })
//   .catch((e) => console.log(e))
//创建iconList 动态展示icon
const iconList = ref([
  { name: 'sun', icon: 'sun' },
  { name: 'cloud', icon: 'cloud' },
  { name: 'rain', icon: 'rain' },
  { name: 'snow', icon: 'snow' },
  { name: 'thunder', icon: 'thunder' },
  { name: 'fog', icon: 'fog' }
])
</script>
